<template>
  <div class="contain">
    <!-- 头部面包屑 -->
    <el-breadcrumb  separator="|" class="headerTop">
      <el-breadcrumb-item><a href="/login">您好,请登录</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">我的订单</a></el-breadcrumb-item>
      <el-breadcrumb-item
        ><el-dropdown>
          <span class="el-dropdown-link">
            我的京东<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-breadcrumb-item>
    </el-breadcrumb>
    
    <!-- 中间 -->
    <div class="zhongjian">
      <router-view></router-view>
    </div>
    <!-- 底部备案 -->
    <div
      class="beian"
      style="
        float: left;
        width: 100%;
        height: 100px;
        background-color: rgba(214, 214, 214, 0.842);
        margin-top: 10px;
        border-top:1px solid gray;
      "
    >
      <br />
      <div style="margin: auto;width:150px">
        <el-link
          :underline="false"
          href="https://beian.miit.gov.cn/"
          style="display: flex; justify-content: center"
          >闽ICP备51465413</el-link
        >
      </div>
      <div style="margin: auto;width:120px;">
        <el-link
          type="primary"
          :underline="false"
          style="margin-left:10px"
        >
          <img src="../imgs/beian.jpg" style="padding-right: 2px" />公安备案号
        </el-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 设置背景颜色
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#f4f4f4;')
  },
  //  beforeDestroy () {
  //   document.querySelector('body').removeAttribute('style')
  // },
  data () {
    return {
      
    }
  }
}
</script>

<style scoped>
/* 头部面包屑 */
.headerTop {
  display: flex;
  justify-content: center;
  background-color: #e3e4e5;
  height: 40px;
  line-height: 40px;
  /* width: 80%; */
  margin: auto;
  /* position: fixed; */
  width: 100%;
}


li {
  list-style: none;
}
a {
  text-decoration: none;
  font-weight: 300 !important;
}
a:hover {
  color: red !important;
}
.contain {
  padding: 0;
  margin-top: 0px !important;
}

.zhongjian{
  margin: auto;
}
</style>